<div id="content-detail-page" *ngIf="repository">
    <app-page-header [headerTitle]="pageTitle" [headerIcon]="pageIcon"></app-page-header>

    <div class="container-fluid content-detail-container">
        <div *ngIf="repository && repository.deprecated" class="alert alert-danger">
            <span class="pficon pficon-error-circle-o"></span>
            This item has been deprecated. We recommend that you take a look at one of <a [routerLink]="['/','search']" [queryParams]="{keywords: repository.name, deprecated: false}">
                these instead</a>.
        </div>
        <div class="row" *ngIf="showEmptyState">
            <div class="col-sm-12">
                <pfng-empty-state [config]="emptyStateConfig" (onActionSelect)="handleActionClicked($event)">
                </pfng-empty-state>
            </div>
        </div>

        <app-content-header [repository]="repository" [namespace]="namespace" *ngIf="!showEmptyState"></app-content-header>

        <div class="row btn-row" *ngIf="!showEmptyState">
            <div class="col-sm-12">
                <button appLogEvent type="button" class="btn btn-default" [ngClass]="{'btn-primary': showingView === ViewTypes.detail}" tooltip="Return to main content view"
                    (click)="toggleView(ViewTypes.detail)">Details</button>
                <button appLogEvent type="button" class="btn btn-default" *ngIf="hasReadme" [ngClass]="{'btn-primary': showingView === ViewTypes.readme}"
                    tooltip="View the repository's README file" (click)="toggleView(ViewTypes.readme)">Read Me</button>
                <button appLogEvent type="button" class="btn btn-default" *ngIf="hasMetadata" [ngClass]="{'btn-primary': showingView === ViewTypes.meta}"
                    tooltip="View the {{ metadataFilename }} file" (click)="toggleView(ViewTypes.meta)">Metadata</button>
                <button appLogEvent="Modules" type="button" class="btn btn-default" *ngIf="contentCounts.module" [ngClass]="{'btn-primary': showingView === ViewTypes.modules}"
                    tooltip="View modules" (click)="toggleView(ViewTypes.modules)">{{ contentCounts.module }}
                    Modules
                </button>
                <button appLogEvent type="button" class="btn btn-default" *ngIf="contentCounts.moduleUtils" [ngClass]="{'btn-primary': showingView === ViewTypes.moduleUtils}"
                    tooltip="View module utils" (click)="toggleView(ViewTypes.moduleUtils)">
                    {{ contentCounts.moduleUtils }} Module Utils</button>
                <button appLogEvent="Plugins" type="button" class="btn btn-default" *ngIf="contentCounts.plugin" [ngClass]="{'btn-primary': showingView === ViewTypes.plugins}"
                    tooltip="View plugins" (click)="toggleView(ViewTypes.plugins)"><i class="fa fa-plug"></i>
                    {{ contentCounts.plugin }} Plugins</button>
                <button appLogEvent="Roles" type="button" class="btn btn-default" *ngIf="contentCounts.role" [ngClass]="{'btn-primary': showingView === ViewTypes.roles}"
                    tooltip="View modules" (click)="toggleView(ViewTypes.roles)"><i class="fa fa-gear"></i>
                    {{ contentCounts.role }} Roles</button>
            </div>
        </div>

        <div *ngIf="!showEmptyState && showingView === ViewTypes.detail">
            <div class="row detail display-flex">
                <div class="col-lg-8 ">
                    <card-info
                        [repository]="repository"
                        [repoContent]="repoContent"
                        [repoType]="repoType"
                        [metadata]="metadata">
                    </card-info>
                </div>

                <div class="col-lg-4">
                    <card-community-survey
                        [communityScore]="repository.community_score"
                        [qualityScore]="repository.quality_score"
                        [contentId]="repository.id"
                        [showCommunityDetails]="showComunityDetails"
                        [showQualityDetails]="showQualityDetails"
                        [lastScored]="repository.quality_score_date"
                        [namespaceOwners]="namespace.summary_fields.owners"
                        contentFormat="repository"
                        (emitDetails)="scoreDetailHandler($event)">
                    </card-community-survey>
                </div>
            </div>

            <div *ngIf="showComunityDetails" class="row detail score-detail">
                <div class="col-sm-12">
                    <pfng-card
                        [config]="config"
                        [headerTemplate]="headerTemplate">
                        <ng-template #headerTemplate>
                            <div class="card-heading">
                                <div>
                                    <div class="icon-container">
                                        <span class="fa fa-check-circle fa-2x"></span>
                                    </div>
                                    <div class="title-text">Community Score Details</div>
                                </div>
                                <div>
                                    <span (click)="toggleSurveyDetails('showComunityDetails')" class="pficon-close fa-lg close-details"></span>
                                </div>
                            </div>
                        </ng-template>

                        <div class="card-body">
                            <div *ngFor="let bar of communityScoreDetails">
                                <app-score-bar
                                    extraInfo="{{bar.count}} answer{{ bar.count !== 1 ? 's':'' }}"
                                    [score]="bar.value"
                                    [dividend]="5"
                                    [text]="bar.question"
                                    [customTextStyle]="{'width': '175px'}"
                                    >
                                </app-score-bar>
                            </div>
                        </div>
                    </pfng-card>
                </div>
            </div>

            <div *ngIf="showQualityDetails" class="row detail score-detail">
                <div class="col-sm-12">
                    <pfng-card
                        [config]="config"
                        [headerTemplate]="headerTemplate">
                        <ng-template #headerTemplate>
                            <div class="card-heading">
                                <div>
                                    <div class="icon-container">
                                        <span class="fa fa-check-circle fa-2x"></span>
                                    </div>
                                    <div class="title-text">Quality Score Details</div>
                                </div>
                                <div>
                                    <span (click)="toggleSurveyDetails('showQualityDetails')" class="pficon-close fa-lg close-details"></span>
                                </div>
                            </div>
                        </ng-template>

                        <div class="card-body">
                            <pfng-list *ngIf="content.length > 1"
                                [config]="qualityListConfig"
                                [expandTemplate]="listExpandTemplate"
                                [items]="content"
                                [itemTemplate]="itemTemplate">
                                <ng-template #itemTemplate let-item="item">
                                    <!-- <div class="list-pf-left">
                                        <span class="fa fa-check"></span>
                                    </div> -->
                                    <div class="list-pf-content-wrapper">
                                        <div class="list-pf-main-content">
                                            <div class="list-pf-title">{{item.name}}</div>
                                            <div class="list-pf-description text-overflow-pf">
                                                Quality Score: {{ convertScore(item.quality_score) }}
                                            </div>
                                        </div>
                                        <!-- <div class="list-pf-additional-content">
                                            test
                                        </div> -->
                                    </div>
                                </ng-template>
                                <ng-template #listExpandTemplate let-item="item" let-index="index">
                                    <app-quality-details [content]="item"></app-quality-details>
                                </ng-template>
                            </pfng-list>

                            <app-quality-details *ngIf="content.length === 1" [content]="content[0]"></app-quality-details>
                        </div>
                    </pfng-card>
                </div>
            </div>

            <div class="row detail">
                <div class="col-lg-3"
                    *ngIf="repoContent && repoContent['hasPlatforms']">
                    <card-platforms [platforms]="repoContent['platforms']"></card-platforms>
                </div>
                <div class="col-lg-3"
                    *ngIf="repoContent && repoContent['hasVersions']">
                    <card-versions [versions]="repoContent['versions']"></card-versions>
                </div>
                <div class="col-lg-3"
                    *ngIf="repoContent && repoContent['hasCloudPlatforms']">
                    <card-cloud-platforms
                        [cloudPlatforms]="repoContent['cloud_platforms']">
                    </card-cloud-platforms>
                </div>
                <div class="col-lg-3"
                    *ngIf="repoContent && repoContent['hasDependencies']">
                    <card-dependencies
                        [dependencies]="repoContent['dependencies']">
                    </card-dependencies>
                </div>
            </div>
        </div>

        <div class="row row-readme" *ngIf="!showEmptyState && showingView === ViewTypes.readme">
            <div class="col-sm-12">
                <div class="readme" [innerHTML]="repoContent.readme_html"></div>
            </div>
        </div>
        <div class="row meta" *ngIf="!showEmptyState && showingView === ViewTypes.meta">
            <div class="col-sm-12">
                <pre>{{ metadata | json }}</pre>
            </div>
        </div>
        <div class="row modules" *ngIf="!showEmptyState && showingView === ViewTypes.modules">
            <div class="col-sm-12">
                <modules-detail [repository]="repository" [selectedContent]="selectedContent"></modules-detail>
            </div>
        </div>
        <div class="row modules" *ngIf="!showEmptyState && showingView === ViewTypes.roles">
            <div class="col-sm-12">
                <roles-detail [repository]="repository" [selectedContent]="selectedContent"></roles-detail>
            </div>
        </div>
        <div class="row modules" *ngIf="!showEmptyState && showingView === ViewTypes.plugins">
            <div class="col-sm-12">
                <plugins-detail [repository]="repository" [selectedContent]="selectedContent"></plugins-detail>
            </div>
        </div>
        <div class="row modules" *ngIf="!showEmptyState && showingView === ViewTypes.moduleUtils">
            <div class="col-sm-12">
                <module-utils-detail [repository]="repository" [selectedContent]="selectedContent">
                </module-utils-detail>
            </div>
        </div>
    </div>

</div>
<app-page-loading [loading]="pageLoading"></app-page-loading>
